<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/echarts.min.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/flexb.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <div class="view">
        <!-- 左侧容器 -->
        <div class="left_container">
            <!-- 上 -->
            <div class="left_top_container">
                <div class="box">
                    <h3>2,190</h3>
                    <p>
                        <span class="icon-dot"></span>
                        设备总数
                    </p>
                </div>
                <div class="box">
                    <h3>2,190</h3>
                    <p>
                        <span class="icon-dot"></span>
                        设备总数
                    </p>
                </div>
                <div class="box">
                    <h3>2,190</h3>
                    <p>
                        <span class="icon-dot"></span>
                        设备总数
                    </p>
                </div>
                <div class="box">
                    <h3>2,190</h3>
                    <p>
                        <span class="icon-dot"></span>
                        设备总数
                    </p>
                </div>
            </div>
            <!-- 中 -->
            <div class="left_middle_container">
                <!-- 顶部标题盒子  -->
                <div class="top_title">
                    <a href="javascript:; " class="active" data-Myidname="gz">故障设备监控</a>
                    <div class="line_box"></div>
                    <a href="javascript:;" data-Myidname="yc">异常设备监控</a>
                </div>
                <!-- 副标题 -->
                <div class="subtitle">
                    <span>故障时间</span>
                    <span>设备地址</span>
                    <span>异常代码</span>
                </div>
                <!-- 内容区域 -->
                <div class="content">
                    <!-- 故障内容 -->
                    <div class="item_content" id="gz" style="display:block">
                        <ul>
                            <li>
                                <span>2025</span>
                                <span>嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025</span>
                                <span>嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025</span>
                                <span>嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025</span>
                                <span>嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025</span>
                                <span>嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025</span>
                                <span>嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025</span>
                                <span>嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025</span>
                                <span>嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025</span>
                                <span>嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025</span>
                                <span>嘉创大厦</span>
                                <span>10086</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 异常内容 -->
                    <div class="item_content" id="yc" style="display:none">
                        <ul>
                            <li>
                                <span>2023</span>
                                <span>御马科技</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2023</span>
                                <span>御马科技</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2023</span>
                                <span>御马科技</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2023</span>
                                <span>御马科技</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2023</span>
                                <span>御马科技</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2023</span>
                                <span>御马科技</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2023</span>
                                <span>御马科技</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2023</span>
                                <span>御马科技</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2023</span>
                                <span>御马科技</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2023</span>
                                <span>御马科技</span>
                                <span>10010</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 下 -->
            <div class="left_bottom_container">
                <!-- 标题 -->
                <div class="title">
                    <h3>定位分布统计</h3>
                </div>
                <!-- 内容区域 -->
                <div class="content">
                    <!-- 饼状图 -->
                    <div class="left_pieBox"></div>
                    <!-- 数据 -->
                    <div class="right_data">
                        <div class="item">
                            <h3>320,11</h3>
                            <p>
                                <span class="icon-dot"></span>
                                <span>点位总数</span>
                            </p>
                        </div>
                        <div class="item">
                            <h3>320,11</h3>
                            <p>
                                <span class="icon-dot"></span>
                                <span>点位总数</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间 -->
        <div class="middle_container">
            <!-- 标题 -->
            <div class="title">
                <span class="icon-cube"></span>
                设备总量统计
            </div>
            <!-- 地图 -->
            <div class="map"></div>
            <!-- 柱状图 -->
            <div class="bar_Box">
                <!-- 标题 -->
                <div class="title">
                    <h3>全国用户量统计</h3>
                </div>
                <!-- 内容 -->
                <div class="content">
                    <div class="left_bar"></div>
                    <div class="right_msg">
                        <div class="top">
                            <h3>320,11</h3>
                            <p>
                                <span class="icon-dot"></span>
                                点位总数
                            </p>
                        </div>
                        <div class="bottom">
                            <h3>418</h3>
                            <p>
                                <span class="icon-dot"></span>
                                本月新增
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- 右侧 -->
        <div class="right_container">
            <!-- 右侧第一个盒子 -->
            <div class="one">
                <!-- 标题 -->
                <div class="title">
                    <a href="javascript:;" data-index="0">365天</a>
                    <div class="line_box"></div>
                    <a href="javascript:;" data-index="1">90天</a>
                    <div class="line_box"></div>
                    <a href="javascript:;" data-index="2">30天</a>
                    <div class="line_box"></div>
                    <a href="javascript:;" data-index="3">24小时</a>
                </div>
                <!-- 内容区域 -->
                <div class="content">
                    <div class="left">
                        <h3>987</h3>
                        <p>
                            <span class="icon-dot"></span>
                            <span>订单量</span>
                        </p>
                    </div>
                    <div class="right">
                        <h3>1834</h3>
                        <p>
                            <span class="icon-dot"></span>
                            <span>销售额(万元)</span>
                        </p>
                    </div>
                </div>
            </div>
            <!-- 右侧第二个盒子 -->
            <div class="two">
                <!-- 标题 -->
                <div class="title">
                    <h3>销售额统计</h3>
                    <div class="line_box"></div>
                    <a href="javascript:;" data-id="year" class="active">年</a>
                    <a href="javascript:;" data-id="quarter">季</a>
                    <a href="javascript:;" data-id="month">月</a>
                    <a href="javascript:;" data-id="week">周</a>
                </div>
                <!-- //底部折线图 -->
                <div class="line"></div>
            </div>
            <!-- 父容器 -->
            <div class="bbox clearfix">
                <!-- 右侧第三个盒子 -->
                <div class="three">
                    <div class="title">
                        <h3>渠道分布</h3>
                    </div>
                    <div class="content">
                        <!-- 上面两个盒子 -->
                        <div class="top2">
                            <!-- 左盒子 -->
                            <div class="left">
                                <h3>39%</h3>
                                <div class="tip">
                                    <span class="icon-plane"></span>
                                    机场
                                </div>
                            </div>
                            <!-- 右盒子 -->
                            <div class="right">
                                <h3>39%</h3>
                                <div class="tip">
                                    <span class="icon-plane"></span>
                                    机场
                                </div>
                            </div>
                        </div>
                        <!-- 下面两个盒子 -->
                        <div class="bottom2">
                            <div class="left">
                                <h3>39%</h3>
                                <div class="tip">
                                    <span class="icon-plane"></span>
                                    机场
                                </div>
                            </div>
                            <div class="right">
                                <h3>39%</h3>
                                <div class="tip">
                                    <span class="icon-plane"></span>
                                    机场
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右侧第四个盒子 -->
                <div class="four">
                    <h3>一季度销售进度</h3>
                    <div class="r"></div>
                    <!-- 下面两个盒子 -->
                    <div class="bottom2">
                        <div class="left">
                            <h3>39%</h3>
                            <div class="tip">
                                <span class="icon-plane"></span>
                                机场
                            </div>
                        </div>
                        <div class="right">
                            <h3>39%</h3>
                            <div class="tip">
                                <span class="icon-plane"></span>
                                机场
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧第五个盒子 -->
            <div class="five">
                <!-- 标题 -->
                <div class="title">
                    <span class="left">全国热销</span>
                    <span class="middle">各省热销</span>
                    <span class="right">//近30日//</span>
                </div>
                <!-- 内容 -->
                <div class="content">
                    <!-- 左部奖杯 -->
                    <div class="cup">
                        <div class="cup1">
                            <span class="icon-cup1"></span>
                            可爱多
                        </div>
                        <div class="cup2">
                            <span class="icon-cup2"></span>
                            可爱多
                        </div>
                        <div class="cup3">
                            <span class="icon-cup3"></span>
                            可爱多
                        </div>
                    </div>
                    <!-- 中部热销 -->
                    <div class="hot">
                        <ul>
                            <li>
                                <span>北京</span>
                                <span>25,179</span>
                                <span class="icon-up"></span>
                            </li>
                            <li>
                                <span>北京</span>
                                <span>25,179</span>
                                <span class="icon-up"></span>
                            </li>
                            <li>
                                <span>北京</span>
                                <span>25,179</span>
                                <span class="icon-up"></span>
                            </li>
                            <li>
                                <span>北京</span>
                                <span>25,179</span>
                                <span class="icon-up"></span>
                            </li>
                            <li>
                                <span>北京</span>
                                <span>25,179</span>
                                <span class="icon-up"></span>
                            </li>
                        </ul>
                    </div>
                    <!-- 右部 -->
                     <div class="ba">
                        <ul>
                            <li>
                                <span>八喜</span>
                                <span>6,808</span>
                                <span class="icon-up"></span>
                            </li>
                            <li>
                                <span>八喜</span>
                                <span>6,808</span>
                                <span class="icon-up"></span>
                            </li>
                            <li>
                                <span>八喜</span>
                                <span>6,808</span>
                                <span class="icon-up"></span>
                            </li>
                            <li>
                                <span>八喜</span>
                                <span>6,808</span>
                                <span class="icon-up"></span>
                            </li>
                            <li>
                                <span>八喜</span>
                                <span>6,808</span>
                                <span class="icon-up"></span>
                            </li>
                            <li>
                                <span>八喜</span>
                                <span>6,808</span>
                                <span class="icon-up"></span>
                            </li>
                        </ul>
                     </div>
                </div>
            </div>
        </div>
</body>

</html>